import React from "react";
import Admin from "../../../layout/Admin";
import PieceModel from "../../../model/piece";
import log from "../../../service/log";
import {Button, Input, Modal, Select, Table, Row, Col, Popconfirm, Checkbox, DatePicker} from "antd";
import moment from "moment";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import {GlobalContext} from "../../../context";
import Info from "../../../service/info";
import {dayDiff, defaultEnd, defaultStart} from "../../user/user-total/user-total";
const {RangePicker} = DatePicker
class UserPieceRecord extends React.Component {
    constructor(props) {
        super(props)
        this.model = new PieceModel()
        this.state = {
            sum: 0,
            sumToday: 0,
            list: [],
            p: 0,
            state: 0,
            dayDiff: dayDiff,
            start: defaultStart,
            end: defaultEnd,
            dealNo: '',
            uid: '',
            user: null,
            checkState: 1,
            checkInfo: '',
            modal: {
                check: false,
                set: false,
            },
            Phonenumber: '',
            Realname: '',
            timeCheck: false,
        }

        this.columns = [
            {
                title: '申请时间',
                dataIndex: 'Createt',
                render: (time) => moment(time * 1000).format('YYYY-MM-DD HH:mm')
            },
            {
                title: '到期时间',
                dataIndex: 'Expire',
                render: (time) => moment(time * 1000).format('YYYY-MM-DD HH:mm')
            },
            {
                title: '昵称',
                dataIndex: 'Nickname',
            },
            {
                title: '实名',
                dataIndex: 'Realname',
            },
            // {
            //     title: 'UID',
            //     dataIndex: 'Uid',
            // },
            {
                title: '手机号',
                dataIndex: 'Phonenumber',
            },
            {
                title: '提现流水号',
                dataIndex: 'Dealno',
            },
            {
                title: '提现额度',
                dataIndex: 'Quota',
            },
            {
                title: '提现状态',
                dataIndex: 'State',
                render: (text) => ['待受理', '已拒绝', '已通过',][text]
            },
            {
                title: '账户类型',
                dataIndex: 'Accounttype',
            },
            {
                title: '操作',
                render: (data) => {
                    return <>
                        <a
                            style={{marginRight: '8px',}}
                            onClick={() => this.onCheckClick(data)}
                        >审核</a>
                        <a
                            onClick={() => {
                                this.setState({
                                    user: data,
                                    Phonenumber: data.Phonenumber,
                                    Realname: data.Realname,
                                }, () => this.modalShow('set'))
                            }}
                        >查看</a>
                    </>
                }
            }
        ]
    }

    static contextType = GlobalContext

    componentDidMount() {
        this.all()
        this.sum()
    }

    modalShow(key) {
        this.setState({
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    modalCancel(key) {
        this.setState({
            modal: {
                ...this.state.modal,
                [key]: false,
            }
        })
    }

    all() {
        const params = {
            P: this.state.p,
            State: this.state.state,
        }
        const uid = this.state.uid
        const dealNo = this.state.dealNo
        if (uid.length > 0) {
            params.Uid = uid
        }
        if (dealNo.length > 0) {
            params.Dealno = dealNo
        }
        if (this.state.timeCheck) {
            params.Starttime = parseInt(this.state.start.format('X'))
            params.Endtime = parseInt(this.state.end.format('X'))
        }
        this.model.all(params).then(res => {
            this.setState({
                list: res.data.ok,
            })
        })
    }

    set() {
        const params = {
            Dealno: this.state.user.Dealno,
            Phonenumber: this.state.Phonenumber,
            Realname: this.state.Realname,
        }
        this.model
            .set(params)
            .then(res => {
                if (res.data.ok === 1) {
                    Info.success('修改审核记录成功')
                    this.setState({
                        modal: {
                            ...this.state.modal,
                            set: false,
                        }
                    }, () => this.all())
                }
            })
    }

    sum() {
        this.model
            .sum()
            .then(res => {
                log(res)
                this.setState({
                    sum: res.data.sum1,
                    sumToday: res.data.sum2,
                })
            })
    }

    onCheckClick = (user) => {
        this.setState({
            user,
        } , () => this.modalShow('check'))
    }

    onCheck = () => {
        const user = this.state.user
        this.model.check({
            Uid: user.Uid,
            Txt: this.state.checkInfo,
            Dealno: user.Dealno,
            State: this.state.checkState,
            Username: this.context.auth.username,
            Fuliid: user.Fuliid,
        }).then(res => {
            if (res.data.ok === 1) {
                Info.success('审核成功')
                this.setState({
                    checkInfo: '',
                    checkState: 1,
                    modal: {
                        ...this.state.modal,
                        check: false,
                    },
                    p: 0,
                }, () => this.all())
            }
        })
    }

    prevPage = () => {
        this.setState({
            p: this.state.p - 1,
        }, () => this.all())
    }

    nextPage = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    onStateSelect = (value, option) => {
        this.setState({
            state: value,
            p: 0,
        }, () => this.all())
    }

    onDateChange = (value,) => {
        const [start, end,] = value
        const dayDiff = end.diff(start, 'day')
        this.setState({
            start,
            end,
            dayDiff,
        }, () => {
            // this.get()
            this.all()
        })
    }

    render() {
        return <>
            <Modal
                visible={this.state.modal.check}
                onCancel={() => {
                    this.modalCancel('check')
                    this.setState({
                        checkState: 1,
                        checkInfo: '',
                    })
                }}
                onOk={() => this.onCheck()}
            >
                <Row style={{marginBottom: '16px',}}>
                    <Col span={6}>
                        <span>审核结果:</span>
                    </Col>
                    <Col span={18}>
                        <Select
                            defaultValue={this.state.checkState}
                            value={this.state.checkState}
                            onChange={(val, opt) => this.setState({checkState: val})}
                        >
                            <Select.Option value={1} key={1}>拒绝</Select.Option>
                            <Select.Option value={2} key={2}>通过</Select.Option>
                        </Select>
                    </Col>
                </Row>
                <Row>
                    <Col span={6}>
                        <span>审核备注:</span>
                    </Col>
                    <Col span={18}>
                        <Input.TextArea maxLength={255} value={this.state.checkInfo} onChange={e => this.setState({checkInfo: e.target.value,})}/>
                    </Col>
                </Row>
            </Modal>
            <Modal
                visible={this.state.modal.set}
                onCancel={() => {
                    this.setState({
                        account: '',
                        userName: '',
                    })
                    this.modalCancel('set')
                }}
                footer={[
                    <Button
                        onClick={() => {
                            this.setState({
                                account: '',
                                userName: '',
                            })
                            this.modalCancel('set')
                        }}
                        key='cancel'
                    >
                        取消
                    </Button>,
                    <Popconfirm
                        title="是否确定要修改用户审核资料"
                        okText="Yes"
                        cancelText="No"
                        onConfirm={() => this.set()}
                        key='submit'
                    >
                        <Button type='primary'>确认</Button>
                    </Popconfirm>,
                ]}
            >
                {this.state.user && Object.entries(this.state.user).map(([key, value,], index) => {
                    if (key === 'Id') {
                        return null
                    }
                    const titles = {
                        'Accounttype': '账户类型',
                        'Checktime': '审核时间',
                        'Checkuser': '审核人',
                        'Createt': '申请时间',
                        'Dealno': '订单流水号',
                        'Expire': '过期时间',
                        'Fuliid': '福利ID',
                        'Nickname': '用户昵称',
                        'Phonenumber': '手机号码',
                        'Quota': '提现额度',
                        'Realname': '用户实名',
                        'State': '审核状态',
                        'Txt': '审核备注',
                        'Uid': 'Uid',
                    }
                    if (key === 'Createt' || key === 'Expire' || key === 'Checktime') {
                        if (value === 0) {
                            value = '未审核'
                        } else {
                            value = moment(value * 1000).format('YYYY-MM-DD HH:mm')
                        }
                    }
                    if (key === 'Checkuser' && value.length === 0) {
                        value = '未审核'
                    }
                    let valueTemplate = <span>{value}</span>
                    if (key === 'Realname' || key === 'Phonenumber') {
                        valueTemplate = <Input
                            value={this.state[key]}
                            onChange={(e) => {
                                this.setState({
                                    [key]: e.target.value,
                                })
                            }}
                        />
                    }
                    return <Row key={index} style={{marginBottom: '16px',}}>
                        <Col span={6}>
                            <span>{titles[key]}</span>
                        </Col>
                        <Col span={18}>
                            {valueTemplate}
                        </Col>
                    </Row>
                })}
            </Modal>
            <Admin>
                <div className='list-container'>
                    <div style={{marginBottom: '16px',}}>
                        <span style={{marginRight: '8px',}}>提现金额总数：{this.state.sum}</span>
                        <span>今日提现金额总数：{this.state.sumToday}</span>
                    </div>
                    <div style={{display: 'flex', marginBottom: '16px',}}>
                        <Select
                            style={{marginRight: '8px'}}
                            defaultValue={this.state.state}
                            value={this.state.state}
                            onChange={(val, opt) => this.onStateSelect(val, opt)}
                        >
                            {['待受理', '已拒绝', '已通过'].map((state, index) => <Select.Option value={index} key={index}>{state}</Select.Option>)}
                        </Select>
                        <Input
                            style={{width: '30%', marginRight: '8px'}}
                            placeholder='输入订单号'
                            value={this.state.dealNo}
                            onChange={(e) => this.setState({dealNo: e.target.value,})}
                        />
                        <Input
                            style={{width: '30%', marginRight: '8px'}}
                            placeholder='输入UID'
                            value={this.state.uid}
                            onChange={(e) => this.setState({uid: e.target.value,})}
                        />
                        <Button
                            onClick={() => {
                                this.setState({p: 0,}, () => this.all())
                            }}
                        >搜索</Button>
                    </div>
                    <div>
                        <Checkbox
                            checked={this.state.timeCheck}
                            onChange={() => {
                                this.setState({
                                    timeCheck: !this.state.timeCheck,
                                }, () => {
                                    this.all()
                                })
                            }}
                        >
                            时间:
                        </Checkbox>
                        <RangePicker
                            showTime={{ format: 'HH:mm:ss' }}
                            format="YYYY-MM-DD HH:mm:ss"
                            onChange={this.onDateChange}
                            defaultValue={[
                                this.state.start,
                                this.state.end,
                            ]}
                            disabled={this.state.timeCheck === false}
                        />
                    </div>
                    <Table
                        dataSource={this.state.list}
                        columns={this.columns}
                        pagination={false}
                        rowKey={(record, index) => index}
                    />
                    <PaginationFooter
                        pageIndex={this.state.p}
                        prevPage={this.prevPage}
                        nextPage={this.nextPage}
                    />
                </div>
            </Admin>
        </>
    }
}

export default UserPieceRecord